<template>
  <div class="flex goods-col"
    @click="props.isOrder ? '' : $navigateTo('/pages/goods/product/detail?skuId=' + (props.res.skuId || props.res.id) + '&goodsId=' + props.res.goodsId)"
    flex-a-c>
    <div class="goods-img">
      <image v-if="img" :src="img" @error="img = ''" w-140rpx h-140rpx rounded>
      </image>
      <div rounded v-else w-140rpx h-140rpx bg-color text-24rpx flex flex-a-c flex-j-c>图片已失效</div>
    </div>
    <div class="goods-detail" flex-1 flex flex-col flex-j-sb>
      <div flex flex-a-c>
        <div class="title wes2">
          {{ props.res.goodsName || props.res.name || props.res.goodsSku?.goodsName }}
        </div>
        <div class="price-box" flex-col>
          <!-- 是否为积分订单 -->
          <div v-if="props.payPoint"  text-26rpx font-bold text-main-color>{{props.payPoint}}积分</div>
          <div v-else text-26rpx font-bold text-main-color>
            {{ unitPrice(props.price || 0, '￥') }}
          </div>
          <div color-gray v-if="props.res.num || props.res.quantity">
            共<span mx-4rpx>{{ props.res.num || props.res.quantity }}</span>件
          </div>
        </div>
      </div>
      <slot name="body"></slot>
    </div>
  </div>
  <slot name="footer"></slot>
</template>

<script setup lang="ts">
import { unitPrice } from '@/utils/filters';
const props = defineProps<{
  res: any,
  image: any,
  price?: any,
  isOrder?: boolean,  // 是否为订单列表或订单详情
  payPoint?:  String, // 积分订单的积分
}>()
const img = ref(props.image)

</script>

<style scoped lang="scss">
.wes-2 {
  /* 适用于webkit内核和移动端 */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

.goods-row {
  background: #fff;
  padding: 16rpx;

  >.goods-col {
    display: flex;

    >.goods-img {
      overflow: hidden;
      flex: 4;
    }

    >.goods-detail {
      flex: 7;
    }
  }
}

.title {
  flex: 10;
  font-size: 28rpx;
  color: #000;
  line-height: 1.5;
  height: 86rpx;

  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

.goods-detail {
  margin-left: 20rpx;

  >.promotion {
    margin-top: 4rpx;
    display: flex;

    div {
      span {
        font-size: 24rpx;

        margin-right: 10rpx;
        padding: 0 4rpx;
        border-radius: 2rpx;
      }
    }
  }

  .store-seller-name {
    color: #666;
    overflow: hidden;
    display: flex;
    justify-content: space-between;
  }

  .count-config {
    padding: 5rpx 0;
    color: #666;
    display: flex;
    font-size: 24rpx;
    justify-content: space-between;
  }
}

.price-box {
  flex: 2;
  margin-left: 20rpx;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  min-width: 145rpx;
  text-align: right;
  font-size: 24rpx;
}
</style>
